<template>
	<view>
		<cu-custom bgColor="solid-bottom-after bg-white" :isBack="true"><block slot="backText">返回</block><block slot="content"></block></cu-custom>
		<view class="fyt-news">
			<view class="title">任正非：我不明白为什么美国企业天天要给白宫汇报工作</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round" style="background-image:url(http://img.feiyit.com/wl/b1.png);"></view>
					<view class="content" style="left:40px;">
						<view class="text-grey">凯尔</view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								来自于：包头爆料<text class="time">25分钟前</text>
							</view> 
						</view>
					</view>
					<view class="action">
						<button type="button" class="cu-btn round bg-yellow sm">关注</button>
					</view>
				</view>
			</view>
			<view class="text">
				<p>
					中石油反腐风暴再起波澜。今年以来，中国石油天然气集团有限公司（下称中石油）系统内至少已有10名现任或前任高管被查。上述落马人员中有多人曾在中石油独山子石化分公司和长庆油田存在工作交集，其中四人已退休。
				</p>
				<p><img src="http://img.feiyit.com/wl/b1.png" /></p>
				<p>
					6月22日，据黑龙江省纪委监委消息：中国石油天然气集团有限公司独山子石化分公司党委原书记付德新、独山子石化分公司北京联络处原主任张鹏江涉嫌严重违纪违法，目前正在接受中国石油天然气集团有限公司纪检监察组纪律审查和伊春市监委监察调查。
				</p>
				<p>
					付德新、张鹏江二人的职业生涯均始于新疆，曾在独山子石化工作多年，分别在2014年7月、2015年3月退休。今年内公布的中石油落马人员中，有四人的履历指向独山子石化。这场令退休高管卷入其中的反腐风暴始于数月之前的胡永庆案：2月，中石油集团规划计划部副总经理胡永庆涉嫌严重职务违法，接受监察调查。随后的3月，中石油集团广东石化分公司商务部党支部书记、主任马文军涉嫌严重违纪违法，接受中石油集团纪检监察组纪律审查和伊春市监委监察调查。
				</p>
			</view>
			<view class="tags">
				<view class="cu-tag radius">华为</view>
				<view class="cu-tag radius">中国品牌</view>
			</view>
			<view class="shang">
				<view class="zi">赞</view>
				<text class="p">你的鼓励是我们前进的动力</text>
			</view>
			<view class="grid margin-bottom text-center col-4 tool">
				<view><button class="cu-btn round line-grey"><text class="cuIcon-appreciate"></text>260</button></view>
				<view><button class="cu-btn round line-grey"><text class="cuIcon-delete"></text>不喜欢</button></view>
				<view><button class="cu-btn round line-grey"><text class="cuIcon-weixin text-green"></text>微信</button></view>
				<view><button class="cu-btn round line-grey"><text class="cuIcon-discoverfill text-green"></text>朋友圈</button></view>
			</view>
			<view class="cu-bar">
				<view class="action">
					<text class="cuIcon-titles text-orange "></text>全部评论
				</view>
			</view>
			<view class="cu-card fyt-common">
				<view class="cu-list menu-avatar comment">
					<view class="cu-item">
						<view class="cu-avatar round" style="background-image:url(/static/temp/Morgana.png);"></view>
						<view class="content">
							<view class="text-grey">莫甘娜</view>
							<view class="text-gray text-content text-df">
								凯尔，你被自己的光芒变的盲目。
							</view>
							<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
								<view class="flex">
									<view>凯尔：</view>
									<view class="flex-sub">妹妹，你在帮他们给黑暗找借口吗?</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">2018年12月4日<text class="reply">回复</text></view>
								<view>
									<text class="cuIcon-appreciatefill text-red"></text>
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
								</view>
							</view>
						</view>
					</view>
						<view class="cu-item">
							<view class="cu-avatar round" style="background-image:url(/static/temp/Morgana.png);"></view>
							<view class="content">
								<view class="text-grey">莫甘娜</view>
								<view class="text-gray text-content text-df">
									凯尔，你被自己的光芒变的盲目。
								</view>
								
								<view class="margin-top-sm flex justify-between">
									<view class="text-gray text-df">2018年12月4日<text class="reply">回复</text></view>
									<view>
										<text class="cuIcon-appreciatefill text-red"></text>
										<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
									</view>
								</view>
							</view>
						</view>
					<view class="cu-item">
						<view class="cu-avatar round" style="background-image:url(http://img.feiyit.com/wl/b1.png);"></view>
						<view class="content">
							<view class="text-grey">凯尔</view>
							<view class="text-gray text-content text-df">
								妹妹，如果不是为了飞翔，我们要这翅膀有什么用?
							</view>
							<view class="bg-grey padding-sm radius margin-top-sm  text-sm">
								<view class="flex">
									<view>莫甘娜：</view>
									<view class="flex-sub">如果不能立足于大地，要这双脚又有何用?</view>
								</view>
							</view>
							<view class="margin-top-sm flex justify-between">
								<view class="text-gray text-df">2018年12月4日<text class="reply">回复</text></view>
								<view>
									<text class="cuIcon-appreciate text-gray"></text>
									<text class="cuIcon-messagefill text-gray margin-left-sm"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="no-data">
					<image class="noimg" src="http://img.feiyit.com/wl/b1.png"></image>
					<view class="no-text">还没有评论，你的机会来了</view>
				</view>
			</view>
		</view>
		<view class="cu-bar foot input common-foot" :style="[{bottom:InputBottom+'px'}]">
			<view class="action">
				<text class="cuIcon-sound text-grey"></text>
			</view>
			<input class="common-input" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
			 @focus="InputFocus" @blur="InputBlur" placeholder="写评论"></input>
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn round bg-yellow shadow">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				InputBottom: 0
			};
		},
		methods: {
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			}
		}
	}
</script>

<style lang='scss'>
	.fyt-news{
		background-color: #ffffff;
		padding:15px;
		.title{
			font-size: 16px;
			line-height: 24px;
			color: #000;
			font-weight: 400;
		}
		.text{
			padding:10px 0;
			font-size:15px;
			line-height: 24px;
			p{
				margin-bottom: 15px;
			}
			img{
				width:100%;
			}
		}
		.shang{
			padding: 30px 0;
			text-align: center;
			font-size: 13px;
			.zi{
				font-size: 18px;
				font-weight: bold;
				width:35px;
				height: 35px;
				line-height: 35px;
				border-radius: 50%;
				border:1px solid #fbbd08;
				color: #fbbd08;
				display: inline-block;
			}
			.p{
				display: block;
				margin-top: 10px;
			}
		}
		.tool{
			border-bottom: 1px solid #f1f1f1;
			padding-bottom: 20px;
			.cu-btn{
				font-size: 12px;
			}
			uni-text{
				margin-right: 5px;
				font-size: 14px;
			}
		}
		.cu-bar .action:first-child{
			margin-left: 0px;
		}
		.cu-list.menu-avatar.comment>.cu-item{
			padding: 15px 0px 15px 45px;
		}
		.cu-list.menu-avatar>.cu-item .content{
			left:0px;
		}
		.text-df{
			font-size: 12px;
		}
		.fyt-common{
			padding-bottom: 60px;
			.reply{
				margin-left: 30px;
				color: #8799a3;
			}			
		}
		.no-data{
			text-align: center;
			.noimg{
				width:120px;
				height: 120px;
			}
			.no-text{
				color: #999;
			}
		}		
	}
	.common-foot{
		button{
			color: #ffffff;
		}
		.common-input{
			background-color: #f1f1f1;
			border-radius: 30px;
			overflow:hidden;
			padding:0 15px;
			font-size: 14px;
		}
	}
	.cu-list.menu-avatar>.cu-item>.cu-avatar{
		left: 0px;
	}
	.cu-list.menu-avatar>.cu-item .flex .text-cut{
		color: #fbbd08;
		.time{
			margin-left: 20px;
			color: #999;
		}
	}
	.cu-list.menu-avatar>.cu-item .action{
		width:100px;
		text-align: right;
		button{
			font-size:12px;
			color: #ffffff;
			padding: 0 20px;
		}
	}
</style>
